<template>
  <view class="data-analysis-page">
    <!-- 页面头部 -->
    <view class="page-header">
      <text class="page-title">数据分析</text>
      <text class="page-subtitle">社区数据智能分析，让生活更美好</text>
    </view>

    <!-- 数据概览卡片 -->
    <view class="overview-section">
      <view class="overview-grid">
        <view class="overview-card">
          <view class="card-icon emoji-text">👥</view>
          <view class="card-content">
            <text class="card-value">{{ overview.totalResidents }}</text>
            <text class="card-label">总住户数</text>
          </view>
          <view class="card-trend" :class="overview.residentsTrend > 0 ? 'trend-up' : 'trend-down'">
            <text class="trend-icon">{{ overview.residentsTrend > 0 ? '↗' : '↘' }}</text>
            <text class="trend-value">{{ Math.abs(overview.residentsTrend) }}%</text>
          </view>
        </view>

        <view class="overview-card">
          <view class="card-icon emoji-text">🏠</view>
          <view class="card-content">
            <text class="card-value">{{ overview.totalHouses }}</text>
            <text class="card-label">总房屋数</text>
          </view>
          <view class="card-trend" :class="overview.housesTrend > 0 ? 'trend-up' : 'trend-down'">
            <text class="trend-icon">{{ overview.housesTrend > 0 ? '↗' : '↘' }}</text>
            <text class="trend-value">{{ Math.abs(overview.housesTrend) }}%</text>
          </view>
        </view>

        <view class="overview-card">
          <view class="card-icon emoji-text">🚗</view>
          <view class="card-content">
            <text class="card-value">{{ overview.totalVehicles }}</text>
            <text class="card-label">总车辆数</text>
          </view>
          <view class="card-trend" :class="overview.vehiclesTrend > 0 ? 'trend-up' : 'trend-down'">
            <text class="trend-icon">{{ overview.vehiclesTrend > 0 ? '↗' : '↘' }}</text>
            <text class="trend-value">{{ Math.abs(overview.vehiclesTrend) }}%</text>
          </view>
        </view>

        <view class="overview-card">
          <view class="card-icon emoji-text">💰</view>
          <view class="card-content">
            <text class="card-value">{{ overview.occupancyRate }}%</text>
            <text class="card-label">入住率</text>
          </view>
          <view class="card-trend" :class="overview.occupancyTrend > 0 ? 'trend-up' : 'trend-down'">
            <text class="trend-icon">{{ overview.occupancyTrend > 0 ? '↗' : '↘' }}</text>
            <text class="trend-value">{{ Math.abs(overview.occupancyTrend) }}%</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 费用分析 -->
    <view class="analysis-section">
      <view class="section-header">
        <text class="section-title">费用分析</text>
        <text class="section-subtitle">了解社区费用收缴情况</text>
      </view>

      <view class="fee-analysis">
        <view class="fee-chart">
          <view class="chart-title">物业费收缴率</view>
          <view class="chart-container">
            <view class="pie-chart">
              <view class="pie-center">
                <text class="pie-percentage">{{ feeData.paidPercentage }}%</text>
                <text class="pie-label">已缴费</text>
              </view>
            </view>
            <view class="chart-legend">
              <view class="legend-item">
                <view class="legend-color paid"></view>
                <text class="legend-text">已缴费 {{ feeData.paidCount }}户</text>
              </view>
              <view class="legend-item">
                <view class="legend-color unpaid"></view>
                <text class="legend-text">未缴费 {{ feeData.unpaidCount }}户</text>
              </view>
            </view>
          </view>
        </view>

        <view class="fee-stats">
          <view class="stat-row">
            <view class="stat-item">
              <text class="stat-label">本月应收</text>
              <text class="stat-value">¥{{ feeData.monthlyTotal }}</text>
            </view>
            <view class="stat-item">
              <text class="stat-label">本月实收</text>
              <text class="stat-value">¥{{ feeData.monthlyCollected }}</text>
            </view>
          </view>
          <view class="stat-row">
            <view class="stat-item">
              <text class="stat-label">收缴率</text>
              <text class="stat-value">{{ feeData.collectionRate }}%</text>
            </view>
            <view class="stat-item">
              <text class="stat-label">平均缴费</text>
              <text class="stat-value">¥{{ feeData.averageFee }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 服务满意度 -->
    <view class="analysis-section">
      <view class="section-header">
        <text class="section-title">服务满意度</text>
        <text class="section-subtitle">社区服务质量评价</text>
      </view>

      <view class="satisfaction-analysis">
        <view class="satisfaction-overall">
          <view class="overall-score">
            <text class="score-value">{{ satisfactionData.overallScore }}</text>
            <text class="score-label">综合评分</text>
          </view>
          <view class="score-stars">
            <text 
              v-for="i in 5" 
              :key="i"
              class="star"
              :class="{ active: i <= satisfactionData.overallScore }"
            >
              ⭐
            </text>
          </view>
        </view>

        <view class="satisfaction-details">
          <view 
            v-for="item in satisfactionData.details" 
            :key="item.service"
            class="satisfaction-item"
          >
            <view class="service-info">
              <text class="service-name">{{ item.service }}</text>
              <text class="service-score">{{ item.score }}分</text>
            </view>
            <view class="score-bar">
              <view class="bar-bg">
                <view class="bar-fill" :style="{ width: item.percentage + '%' }"></view>
              </view>
              <text class="bar-percentage">{{ item.percentage }}%</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 社区活动统计 -->
    <view class="analysis-section">
      <view class="section-header">
        <text class="section-title">社区活动</text>
        <text class="section-subtitle">了解社区活动参与情况</text>
      </view>

      <view class="activity-analysis">
        <view class="activity-chart">
          <view class="chart-title">活动参与度趋势</view>
          <view class="trend-chart">
            <view 
              v-for="(month, index) in activityData.monthlyTrend" 
              :key="index"
              class="trend-bar"
              :style="{ height: month.participation + '%' }"
            >
              <text class="bar-value">{{ month.participation }}%</text>
              <text class="bar-month">{{ month.month }}</text>
            </view>
          </view>
        </view>

        <view class="activity-stats">
          <view class="stat-item">
            <text class="stat-value">{{ activityData.totalActivities }}</text>
            <text class="stat-label">年度活动总数</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">{{ activityData.avgParticipation }}%</text>
            <text class="stat-label">平均参与率</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">{{ activityData.popularActivity }}</text>
            <text class="stat-label">最受欢迎活动</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 安全指数 -->
    <view class="analysis-section">
      <view class="section-header">
        <text class="section-title">安全指数</text>
        <text class="section-subtitle">社区安全状况分析</text>
      </view>

      <view class="security-analysis">
        <view class="security-score">
          <view class="score-circle">
            <text class="circle-score">{{ securityData.safetyScore }}</text>
            <text class="circle-label">安全指数</text>
          </view>
          <view class="score-description">
            <text class="description-text">{{ securityData.safetyLevel }}</text>
            <text class="description-detail">{{ securityData.safetyDescription }}</text>
          </view>
        </view>

        <view class="security-metrics">
          <view class="metric-item">
            <text class="metric-label">监控覆盖率</text>
            <text class="metric-value">{{ securityData.cameraCoverage }}%</text>
            <view class="metric-bar">
              <view class="bar-fill" :style="{ width: securityData.cameraCoverage + '%' }"></view>
            </view>
          </view>
          <view class="metric-item">
            <text class="metric-label">门禁完好率</text>
            <text class="metric-value">{{ securityData.accessControl }}%</text>
            <view class="metric-bar">
              <view class="bar-fill" :style="{ width: securityData.accessControl + '%' }"></view>
            </view>
          </view>
          <view class="metric-item">
            <text class="metric-label">消防设施完好率</text>
            <text class="metric-value">{{ securityData.fireSafety }}%</text>
            <view class="metric-bar">
              <view class="bar-fill" :style="{ width: securityData.fireSafety + '%' }"></view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 数据更新时间 -->
    <view class="update-info">
      <text class="update-text">数据更新时间：{{ lastUpdateTime }}</text>
      <text class="update-note">数据来源于社区管理系统，每日更新</text>
    </view>
  </view>
</template>

<script setup>
/**
 * 数据分析页面
 * @author Wu.Liang
 * @date 2025-01-30
 * @version 1.0.0
 * @description 社区数据分析页面，从住户和业主角度展示社区数据
 */

import { ref, reactive, computed, onMounted } from 'vue'

// 数据概览
const overview = reactive({
  totalResidents: 1256,
  residentsTrend: 2.3,
  totalHouses: 892,
  housesTrend: 1.8,
  totalVehicles: 567,
  vehiclesTrend: 3.2,
  occupancyRate: 94.2,
  occupancyTrend: 0.5
})

// 费用数据
const feeData = reactive({
  paidCount: 842,
  unpaidCount: 50,
  paidPercentage: 94.4,
  unpaidPercentage: 5.6,
  monthlyTotal: 267800,
  monthlyCollected: 252800,
  collectionRate: 94.4,
  averageFee: 298
})

// 计算饼图角度
const feeDataComputed = computed(() => {
  const paidAngle = (feeData.paidPercentage / 100) * 360
  const unpaidAngle = 360 - paidAngle
  return { paidAngle, unpaidAngle }
})

// 满意度数据
const satisfactionData = reactive({
  overallScore: 4.6,
  details: [
    { service: '物业服务', score: 4.7, percentage: 94 },
    { service: '安保服务', score: 4.8, percentage: 96 },
    { service: '清洁服务', score: 4.5, percentage: 90 },
    { service: '维修服务', score: 4.4, percentage: 88 },
    { service: '停车服务', score: 4.6, percentage: 92 }
  ]
})

// 活动数据
const activityData = reactive({
  totalActivities: 24,
  avgParticipation: 78.5,
  popularActivity: '社区文化节',
  monthlyTrend: [
    { month: '1月', participation: 65 },
    { month: '2月', participation: 70 },
    { month: '3月', participation: 75 },
    { month: '4月', participation: 80 },
    { month: '5月', participation: 85 },
    { month: '6月', participation: 90 }
  ]
})

// 安全数据
const securityData = reactive({
  safetyScore: 92,
  safetyLevel: '优秀',
  safetyDescription: '社区安全状况良好，各项安全指标达标',
  cameraCoverage: 95,
  accessControl: 98,
  fireSafety: 96
})

// 最后更新时间
const lastUpdateTime = ref('')

// 更新最后更新时间
const updateLastUpdateTime = () => {
  const now = new Date()
  lastUpdateTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 页面加载
onMounted(() => {
  console.log('数据分析页面已加载')
  updateLastUpdateTime()
  
  // 模拟数据更新
  setInterval(() => {
    updateLastUpdateTime()
  }, 60000) // 每分钟更新一次
})
</script>

<style scoped>
.data-analysis-page {
  min-height: 100vh;
  background: #f8f9fa;
  padding-bottom: 40rpx;
}

.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 60rpx 30rpx 40rpx;
  text-align: center;
  color: #fff;
}

.page-title {
  display: block;
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
}

.page-subtitle {
  display: block;
  font-size: 28rpx;
  opacity: 0.9;
}

.overview-section {
  margin: -20rpx 30rpx 30rpx;
  position: relative;
  z-index: 10;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.overview-card {
  background: #fff;
  padding: 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
}

.card-icon {
  font-size: 48rpx;
  margin-right: 20rpx;
}

.card-content {
  flex: 1;
}

.card-value {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 5rpx;
}

.card-label {
  display: block;
  font-size: 24rpx;
  color: #666;
}

.card-trend {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20rpx;
}

.trend-up {
  color: #4caf50;
}

.trend-down {
  color: #f44336;
}

.trend-icon {
  font-size: 24rpx;
  margin-bottom: 5rpx;
}

.trend-value {
  font-weight: bold;
}

.analysis-section {
  background: #fff;
  margin: 0 30rpx 30rpx;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.section-header {
  text-align: center;
  margin-bottom: 40rpx;
}

.section-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.section-subtitle {
  display: block;
  font-size: 26rpx;
  color: #666;
}

.fee-analysis {
  display: flex;
  gap: 30rpx;
  align-items: center;
}

.fee-chart {
  flex: 1;
  text-align: center;
}

.chart-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.chart-container {
  display: flex;
  align-items: flex-start;
  gap: 30rpx;
  padding: 20rpx 0;
  width: 100%;
  overflow: hidden;
}

.pie-chart {
  width: 180rpx;
  height: 180rpx;
  border-radius: 50%;
  background: conic-gradient(
    #4caf50 0deg 340deg,
    #ff9800 340deg 360deg
  );
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pie-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100rpx;
  height: 100rpx;
  background-color: #fff;
  border-radius: 50%;
  text-align: center;
}

.pie-percentage {
  font-size: 28rpx;
  font-weight: bold;
  color: #4caf50;
  line-height: 1;
}

.pie-label {
  font-size: 20rpx;
  color: #666;
  margin-top: 4rpx;
}

.chart-legend {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  flex: 1;
  min-width: 0;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 8rpx 0;
}

.legend-color {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-color.paid {
  background: #4caf50;
}

.legend-color.unpaid {
  background: #ff9800;
}

.legend-text {
  font-size: 26rpx;
  color: #333;
  line-height: 1.4;
  white-space: nowrap;
  flex: 1;
}

.fee-stats {
  flex: 1;
  min-width: 0;
}

.stat-row {
  display: flex;
  gap: 15rpx;
  margin-bottom: 15rpx;
}

.stat-item {
  flex: 1;
  text-align: center;
  padding: 15rpx 10rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  min-width: 0;
}

.stat-label {
  display: block;
  font-size: 20rpx;
  color: #666;
  margin-bottom: 6rpx;
  line-height: 1.2;
  word-break: keep-all;
}

.stat-value {
  display: block;
  font-size: 24rpx;
  font-weight: bold;
  color: #2196f3;
  line-height: 1.2;
  word-break: break-all;
}

.satisfaction-analysis {
  text-align: center;
}

.satisfaction-overall {
  margin-bottom: 40rpx;
}

.overall-score {
  margin-bottom: 20rpx;
}

.score-value {
  display: block;
  font-size: 60rpx;
  font-weight: bold;
  color: #ff9800;
  margin-bottom: 10rpx;
}

.score-label {
  display: block;
  font-size: 28rpx;
  color: #666;
}

.score-stars {
  display: flex;
  justify-content: center;
  gap: 10rpx;
}

.star {
  font-size: 40rpx;
  color: #ddd;
}

.star.active {
  color: #ff9800;
}

.satisfaction-details {
  display: flex;
  flex-direction: column;
  gap: 25rpx;
}

.satisfaction-item {
  text-align: left;
}

.service-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.service-name {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.service-score {
  font-size: 28rpx;
  color: #2196f3;
  font-weight: bold;
}

.score-bar {
  display: flex;
  align-items: center;
  gap: 15rpx;
}

.bar-bg {
  flex: 1;
  height: 20rpx;
  background: #f0f0f0;
  border-radius: 10rpx;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4caf50, #8bc34a);
  border-radius: 10rpx;
  transition: width 0.3s ease;
}

.bar-percentage {
  font-size: 22rpx;
  color: #666;
  min-width: 60rpx;
  text-align: right;
}

.activity-analysis {
  text-align: center;
}

.activity-chart {
  margin-bottom: 40rpx;
}

.chart-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.trend-chart {
  display: flex;
  justify-content: space-around;
  align-items: end;
  height: 200rpx;
  gap: 20rpx;
}

.trend-bar {
  flex: 1;
  background: linear-gradient(to top, #2196f3, #64b5f6);
  border-radius: 8rpx 8rpx 0 0;
  position: relative;
  min-height: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.bar-value {
  position: absolute;
  top: -30rpx;
  font-size: 20rpx;
  color: #333;
  font-weight: bold;
}

.bar-month {
  position: absolute;
  bottom: -30rpx;
  font-size: 20rpx;
  color: #666;
}

.activity-stats {
  display: flex;
  gap: 20rpx;
}

.activity-stats .stat-item {
  flex: 1;
  text-align: center;
  padding: 30rpx 20rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
}

.security-analysis {
  text-align: center;
}

.security-score {
  margin-bottom: 40rpx;
}

.score-circle {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #4caf50, #8bc34a);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20rpx;
  color: #fff;
}

.circle-score {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.circle-label {
  font-size: 24rpx;
}

.score-description {
  margin-bottom: 30rpx;
}

.description-text {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.description-detail {
  display: block;
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

.security-metrics {
  display: flex;
  flex-direction: column;
  gap: 25rpx;
}

.metric-item {
  text-align: left;
}

.metric-label {
  display: block;
  font-size: 26rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.metric-value {
  display: block;
  font-size: 28rpx;
  color: #2196f3;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.metric-bar {
  height: 16rpx;
  background: #f0f0f0;
  border-radius: 8rpx;
  overflow: hidden;
}

.metric-bar .bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4caf50, #8bc34a);
  border-radius: 8rpx;
  transition: width 0.3s ease;
}

.update-info {
  background: #fff;
  margin: 0 30rpx;
  padding: 30rpx;
  border-radius: 20rpx;
  text-align: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.update-text {
  display: block;
  font-size: 26rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.update-note {
  display: block;
  font-size: 22rpx;
  color: #999;
}
</style>
